<template>
  <div class="flex">
    <a-card title="基本用法">
      <a-slider :default-value="50" :style="{ width: '200px' }" />
    </a-card>
    <a-card title="禁用状态">
      <a-slider :default-value="50" :style="{ width: '200px' }" disabled />
    </a-card>
    <a-card title="步长">
      <a-slider
        :default-value="20"
        :style="{ width: '300px' }"
        :step="5"
        :show-ticks="true"
      />
    </a-card>
    <a-card title="添加文本标签">
      <a-slider
        :default-value="5"
        :style="{ width: '300px' }"
        :max="15"
        :marks="marks"
      />
    </a-card>
    <a-card title="竖直滑动条">
      <a-slider
        direction="vertical"
        :default-value="5"
        :style="{ width: '300px' }"
        :max="15"
        :marks="marks"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
const marks = {
  0: "0km",
  5: "5km",
  10: "10km",
  15: "15km",
};
</script>

<style lang="scss" scoped>
.flex {
  padding: 0rpx 20px;
}
</style>
